<template>
    <div style="background-color: #fff;">
        <!-- 搜索行 -->
        <el-row class="mb10">
            <el-col :span="6">
                <el-input size="small" v-model="state.searchInput" placeholder="搜索商品">
                    <template #append>
                        <el-button type="info" @click="getGoodsList">搜索</el-button>
                    </template>
                </el-input>
            </el-col>
            <el-col :span="6" :offset="12" align="right">
                <el-button size="small" type="primary" plain @click="jumpAdd()">添加商品</el-button>
            </el-col>
        </el-row>
        <!-- 表格内容 -->
        <el-table :data="ListData.list"
                  v-loading="loading"
                  @sort-change="tabSort"
                  :row-style=rowStyle
                  border
                  :height="tableHeight"
                  ref='tableref'
                  style="width: 100%">
            <el-table-column prop="" label="商品图" width="80" align="center" >
                <template #default="{row,$index}">
                    <div class="demo-image__preview">
                        <el-image v-if="row.imgurl_150 == ''" width="35" height="35" src="http://uterm.vcloud.cibn.cc/img/defaultCorpImg.png"/>
                        <el-image v-else width="35" height="35"
                             :preview-src-list="srcList"
                             :initial-index="$index"
                             :src="row.imgurl_150"/>

                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="goods_id" sortable='custom' :sort-orders=sorder label="商品id"  width="100" />
            <el-table-column prop="goods_name" label="商品名" width="180" v-slot="scope">
                <a href="javascript:;" @click="showGoods(scope.row.goods_id)">{{scope.row.goods_name}}</a>
            </el-table-column>
            <el-table-column prop="market_price" label="市场价" width="100" />
            <el-table-column prop="goods_price" label="实际售价" width="100" />
            <el-table-column prop="state" align="center" sortable='custom' :sort-orders=sorder label="是否上架" width="100" v-slot="scope">
                <span style="color: #67C23A" v-if="scope.row.state == 1">已上架</span>
                <span style="color: #F56C6C" v-if="scope.row.state == 0">已下架</span>
            </el-table-column>
            <el-table-column prop="ctime" :formatter="formatTime" align="center" sortable='custom' :sort-orders=sorder label="创建时间" width="100"/>
            <el-table-column label="操作"  v-slot="scope">
                <el-button size="small" @click="jumpEdit(scope.row)">编辑</el-button>
                <el-button size="small" v-if="scope.row.state == 0" @click="showDialog(scope.row,'state1')">上架</el-button>
                <el-button size="small" v-if="scope.row.state == 1" @click="showDialog(scope.row,'state0')">下架</el-button>

                <el-button size="small" v-if="scope.row.inuse == 1" @click="showDialog(scope.row,'inuse0')" type="danger" plain>删除</el-button>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
            <el-col style="margin-top: 10px;">
                <el-pagination background
                               v-model:currentPage="ListData.page"
                               :page-sizes="[10, 25, 50, 100]"
                               :page-size="ListData.pagesize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="ListData.total"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                />
            </el-col>
        </el-row>

        <!-- 弹窗 -->
        <el-dialog v-model="stateDialog" title="提示" width="30%">
            <span>{{upConfig.desc}}</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="stateDialog = false">再想想</el-button>
                <el-button type="primary" @click="updateGoods()">确定</el-button>
              </span>
            </template>
        </el-dialog>

        <el-dialog width="700px" v-model="dialogFormVisible" title="商品详情" center>
            <el-row>
                <el-col :span="8">
                    <div style="width: 150px; height: 150px;  border: 1px solid #ccc;"><img :src="form.imgurl"></div>
                </el-col>
                <el-col :span="16">
                    <el-row><div style="line-height: 35px;">商品名称：<b >{{form.goods_name}}</b></div></el-row>
                    <el-row><div style="line-height: 35px;">市场价格：<b >{{form.market_price}}&nbsp;元</b></div></el-row>
                    <el-row><div style="line-height: 35px;">实际价格：<b >{{form.goods_price}}&nbsp;元</b></div></el-row>
                    <el-row><div style="line-height: 35px;">是否上架：<b v-if="form.state == 1">上架</b><b v-else>下架</b></div></el-row>
                </el-col>
            </el-row>
            <el-row>
                <div style="line-height: 35px;">
                    供应商：<b v-if="form.supplier !=''">{{form.supplier}}</b><b v-else>暂无</b>
                </div>
            </el-row>
            <el-row>
                <div style="line-height: 35px;">
                    货&nbsp;&nbsp;&nbsp;号：<b v-if="form.goods_sn !=''">{{form.goods_sn}}</b><b v-else>暂无</b>
                </div>
            </el-row>
            <el-row>
                <div style="line-height: 35px;">
                    描&nbsp;&nbsp;&nbsp;述：<b v-if="form.goods_desc!=''">{{form.goods_desc}}</b><b v-else>暂无</b>
                </div>
            </el-row>
            <el-row><div style="line-height: 35px;">商品介绍：</div></el-row>
            <el-row>
                <div class="content-div" v-if="form.content !=null" v-html="form.content"></div><div v-else style="width:100%;text-align: center;">暂无介绍</div>
            </el-row>
        </el-dialog>

    </div>
</template>

<script setup>
    // corpListData
    import {reactive, ref , onMounted} from 'vue'
    import {ElMessage} from "element-plus";
    import {useRouter } from 'vue-router'
    import {useStore} from "vuex";
    import {getGoodsListApi,getUpdateGoods,getGoodsInfoApi} from "@/api/goods/goods";

    // const $route = useRoute()
    const $router = useRouter()
    const stateDialog = ref(false)
    const store = useStore()
    const corpinfo = store.getters.corpinfo
    const sorder = ['ascending', 'descending']
    const loading = ref(false)
    const dialogFormVisible = ref(false)
    //缩略图
    const srcList = ref([])
    const state = reactive({
        keywords:'',
        page:1,
        pagesize:10,
        sort:'mtime',
        sorttype:'desc',
        searchInput:'',
    })
    const upConfig = reactive({
        goods_id:0,
        type:'',
        val:0,
        desc:'',
    })
    const ListData =  ref([])
    const form = reactive({
        goods_name: '',
        market_price: 0,
        goods_price: 0,
        goods_sn: '',
        goods_img: '',
        imgurl:'',
        state: 1,
        goods_desc: '',
        supplier: '',
        content:'',
    })
    //表格自适应高度
    const tableHeight=ref()
    const tableref=ref(null)
    onMounted( () => {
    tableHeight.value =
    window.innerHeight - tableref.value.$el.offsetTop - 80;
    })
    //查看商品详情
    const showGoods = (goods_id) =>{

        let queryList = {
            goods_id : goods_id
        }
        getGoodsInfoApi(queryList).then(res => {
            if (res.errcode == 0) {
                form.goods_name = res.data.goods_name;
                form.market_price = parseInt(res.data.market_price);
                form.goods_price = parseInt(res.data.goods_price);
                form.goods_sn = res.data.goods_sn;
                form.goods_img = res.data.goods_img;
                form.imgurl = res.data.imgurl_150;
                form.state = res.data.state;
                form.goods_desc = res.data.goods_desc;
                form.supplier = res.data.supplier;
                form.content = res.data.content

                dialogFormVisible.value = true
            } else {
                ElMessage.error('发生错误，稍后再试！')
            }
        })
    }
    //取商品列表
    const getGoodsList = () =>{
        loading.value = true;
        let queryList = {
            'corpid': corpinfo.corpid,
            'page':state.page,
            'pagesize':state.pagesize,
            'sort':state.sort,
            'sorttype':state.sorttype,
        }
        if (state.searchInput != ''){
            queryList['keywords'] = state.searchInput
        }
        getGoodsListApi(queryList).then(res => {
            loading.value = false;
            ListData.value = res.data
            res.data.list.forEach(item => {
                srcList.value.push(item.imgurl_720);
            })
        })
    }
    getGoodsList()
    //跳转
    const jumpAdd = () =>{
        $router.push('/goods/detail');
    }
    //跳到编辑页
    const jumpEdit = (row) =>{
        $router.push({path: '/goods/detail',query:{ goods_id:row.goods_id}});
        // $router.push('/article/add');
    }
    //弹出确认框
    const showDialog = (row,type) => {
        upConfig.goods_id = row.goods_id
        if (type == 'state1'){
            upConfig.type = 'state'
            upConfig.val = 1
            upConfig.desc = '确定上架该商品？'
        }else if(type == 'state0'){
            upConfig.type = 'state'
            upConfig.val = 0
            upConfig.desc = '确定下架该商品？'
        }else if(type == 'inuse0'){
            upConfig.type = 'inuse'
            upConfig.val = 0
            upConfig.desc = '确定删除该商品？'
        }
        stateDialog.value = true
    }
    //修改商品状态（上、下架，删除）
    const updateGoods = () => {
        let queryList = {
            'goods_id': upConfig.goods_id
        }
        if (upConfig.type == 'state'){
            queryList['state'] = upConfig.val
        }else if(upConfig.type == 'inuse'){
            queryList['inuse'] = upConfig.val
        }
        getUpdateGoods(queryList).then(res => {
            stateDialog.value = false
            if (res.errcode == 0) {
                ElMessage.success('操作成功')
            } else {
                ElMessage.error('发生错误，稍后再试！')
            }
            getGoodsList()
        })
    }
    //格式化时间
    const formatTime = (row) => {
        if(row.ctime != null){
            return row.ctime.substr(0, 10)
        }
    }
    //分页相关
    const handleSizeChange = (val) =>{
        state.pagesize = val
        getGoodsList()
    }
    const handleCurrentChange = (val) =>{
        state.page = val
        getGoodsList()
    }
    //排序
    const tabSort = (column) =>{
        state.sort = column.prop
        if(column.order == "ascending"){
            state.sorttype = "asc"
        }else if(column.order == "descending"){
            state.sorttype = "desc"
        }
        getGoodsList()
    }
    const rowStyle = () =>{
        return 'height:50px';
    }
</script>

<style>
    .content-div{
        border: 1px solid #ccc;

    }
    .content-div img {
        max-width: 650px;
    }
</style>
